<template>
  <view class="commentWrap">
    <view class="text1">留言 评论 （{{ commentTotal }}条）</view>
    <view v-for="item of commentList" :key="item.commentId" class="commentItem">
      <view class="title">
        <view class="nameWrap">
          <up-image
            :src="`${env.VITE_OSS_BUCKET}${item.authorProfileUrl}`"
            width="50rpx"
            height="50rpx"
            shape="circle"
          ></up-image>
          <view class="commentName">{{ item.authorName }}</view>
        </view>
      </view>
      <view class="commentContent lh-pl-64" @click="handlerReplay(item)">
        {{ item.content }}
      </view>
      <view
        class="lh-flex lh-items-center lh-mt-20 lh-pl-64"
        @click="handlerReplay(item)"
      >
        <view class="time">
          {{ dayjs(item.createdTimestamp).format('YYYY-MM-DD HH:mm:ss') }}
        </view>
        <view class="replayContent lh-ml-20"> 回复 </view>
      </view>
      <!-- 下级回复 -->
      <view v-if="item.subComments.length" class="replayWrap">
        <view
          v-for="subItem of item.subComments"
          :key="subItem.commentId"
          class="replayItem"
          @click="handlerReplay(item)"
        >
          <text class="text1">{{ subItem.authorName }}：</text>
          <text v-if="subItem.repliedUserId" class="text2">
            回复{{ subItem.repliedUserName }}:
          </text>
          <text class="text3">{{ subItem.content }}</text>
        </view>
      </view>
    </view>
  </view>
  <commentCreate ref="commentCreateRef" :articleId="detailId"/>
</template>

<script setup>
import { ref, toRef, provide } from 'vue';
import dayjs from 'dayjs';
import commentCreate from './commentCreate.vue';

import useUserInfo from '@/hooks/useUserInfo.js';

import ArticleManagement from '@/api/articleManagement.js';

const { userInfo } = useUserInfo();

const props = defineProps({
  detailId: {
    type: Number,
    required: true,
  },
});

const commentCreateRef = ref(null);
const detailId = toRef(props, 'detailId');
const commentList = ref([]);
const commentTotal = ref(0);

const gteCommentManagement = () => {
  ArticleManagement.gteCommentManagement(detailId.value).then((res) => {
    commentList.value = res.data;
  });
};

const replayItem = ref({});
const valueConfirm = (content) => {
  ArticleManagement.createCommentManagement({
    content,
    articleId: detailId.value,
    authorId: userInfo.value.userId,
    repliedCommentId: replayItem.value?.commentId,
    repliedUserId: replayItem.value?.authorId,
  }).then((res) => {
    gteCommentManagement();
  });
};
const handlerReplay = (item) => {
  replayItem.value = item;
  commentCreateRef.value.showInput();
};

uni.$on('detailCommentConfirm', valueConfirm);
gteCommentManagement();

provide('replayItem', replayItem);
</script>

<style lang="scss">
.commentWrap {
  padding: 28rpx 74rpx;
  margin-top: 28rpx;
  border-top: 1px solid #eeeeee;
  padding-bottom: calc(150rpx + env(safe-area-inset-bottom) / 2);
}
.text1 {
  font-size: 28rpx;
  font-weight: 500;
  color: #333333;
  margin-bottom: 22rpx;
}
.commentItem {
  padding-bottom: 20rpx;
  border-bottom: 1px solid #eeeeee;
  margin-bottom: 20rpx;
}
.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16rpx;
}
.time {
  font-size: 20rpx;
  color: #999999;
}
.nameWrap {
  display: flex;
  align-items: center;
}
.commentName {
  font-size: 26rpx;
  color: #666666;
  margin-left: 14rpx;
  display: flex;
}
.commentContent {
  font-size: 28rpx;
  color: #333333;
}
.replayContent {
  font-size: 24rpx;
  color: #666;
}
.replayWrap {
  margin-left: 64rpx;
  margin-top: 20rpx;
  padding: 20rpx;
  padding-bottom: 12rpx;
  background-color: rgba($color: #999, $alpha: 0.1);
  border-radius: 8rpx;
  overflow: hidden;
  font-size: 26rpx;
  .replayItem {
    margin-bottom: 8rpx;
  }
  .text1 {
    color: #999;
  }
  .text2 {
    color: #333;
  }
  .text3 {
    color: #333;
  }
}
</style>
